<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>

        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">
        <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.js"></script>

    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="index_main"  onclick="hidediaolog()">
            <div class="index_mainhead" id="app" v-cloak >
                <div class="imh_left">
                    <img class="index_logo" src="../img/logowhite.png">
                    <el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse" >
                        <img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
                    </el-tooltip>

                    <el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
                        <img class="index_action"  src="../img/right.png" v-on:click="changemenu">
                    </el-tooltip>

                </div>
                <div class="imh_right">
                    <div class="right_notice" v-on:click.stop="shownoticedialog">
                        <el-badge :value="12" :max="99" class="item">
                            <img class="right_noticeimg" src="../img/jinbao.png">
                        </el-badge>
                        <div class="noticelist" v-if="shownotice">
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticebottom">
                                <span>点击查看更多</span>
                            </div>
                        </div>
                    </div>
                    <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                        <img :src="langinfo.img">
                        <span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
                        <img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
                    </div>
                    <div class="head_line">

                    </div>
                    <div class="head_loginout">
                        <img src="../img/tuichu.png">
                    </div>
                </div>

                <div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
                    <template v-for="item in langlist">
                        <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                            <img :src="item.img">
                            <span>{{item.name}}</span>
                        </div>
                    </template>

                </div>
            </div>
            <div class="index_maincontent">
                <div class="imc_left" id="meun" v-cloak>
                    <div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
                        <div class="userimg">
                            <img src="../img/tx.png">
                        </div>
                        <div class="userinfo" >
                            <div class="usertitle">
                                <span>智棚物联网</span>
                            </div>
                            <div class="userdesc">
                                <span>管理员</span>
                            </div>
                        </div>

                        <div class="userinfoaction" v-if="showuserinfoaction">
                            <div class="actionimg">
                                <img src="../img/sanjiao.png">
                            </div>
                            <div class="actionlist">
                                <div class="actiondiv">
                                    <span>基本资料</span>
                                </div>
                                <div class="actiondiv">
                                    <span>修改密码</span>
                                </div>
                                <div class="actiondiv">
                                    <span>退出</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="indexmenu">
                        <el-menu
                            ref="menu"
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :collapse="isCollapse"
                            background-color="#1A2F70"
                            text-color="#dfdfdf"
                            :unique-opened="true"
                            :collapse-transition="false">
                            <el-menu-item index="2" v-on:click="hidefarmlist">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-grid"></i>
                                    <span>农场列表</span>
                                </template>
                                <el-menu-item-group class="seconditem" style="background: #253C82">
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item class="thirditem" index="1-4-1">选项1</el-menu-item>
                                    </el-submenu>
                                </el-menu-item-group>




                            </el-submenu>

                            <el-menu-item index="3" v-on:click="hidefarmlist">
                              <i class="el-icon-s-platform"></i>
                              <span slot="title">智能场景</span>
                            </el-menu-item>
                            <el-menu-item index="4" v-on:click="hidefarmlist">
                              <i class="el-icon-s-order"></i>
                              <span slot="title">智棚服务</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                </div>
                <div class="imc_right" id="content" v-cloak>
                    <div class="imc_righthead">
                        <span>首页</span>
                    </div>
                    <div class="mainright_content">
                            <div class="fc_maindivhead">
                            <div class="fchead_left">
                                <div class="hoverdiv">
                                    <div class="fcleft_div fcleft_sy">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>首页</span></div>
                                            <div class="fcldl_desc"><span>home page</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/sy.png"></div>
                                        <img src="../img/xz.png" style="width: 0.31rem;position: absolute;
                                        top: -1px;right: 0;">
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(0, 180, 62);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>设备控制</span></div>
                                            <div class="fcldl_desc"><span>Equipment control</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/xmkz.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(100, 112, 232);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>系统报警</span></div>
                                            <div class="fcldl_desc"><span>System alarm</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/baojing.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(251, 139, 139);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>传感数据</span></div>
                                            <div class="fcldl_desc"><span>Sensing data</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/cgq.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(27, 140, 228);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>视频监控</span></div>
                                            <div class="fcldl_desc"><span>Video surveillance</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/spjk.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(236, 113, 71);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>参数设置</span></div>
                                            <div class="fcldl_desc"><span>Parameter setting</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/cssz.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(195, 74, 211);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>历史数据</span></div>
                                            <div class="fcldl_desc"><span>historical data</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/lssj.png"></div>
                                    </div>
                                </div>
                                <div class="hoverdiv">
                                    <div class="fcleft_div" style="background: rgb(66, 175, 248);">
                                        <div class="fcldiv_left">
                                            <div class="fcldl_title"><span>统计分析</span></div>
                                            <div class="fcldl_desc"><span>statistical analysis</span></div>
                                        </div>
                                        <div class="fcldiv_right"><img src="../img/tjfx.png"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="fchead_right">
                                <div class="fcr_left">
                                    <div class="fcrl_top"><img src="../img/qing.png"></div>
                                    <div class="fcrl_bottom"><span>晴</span></div>
                                </div>
                                <div class="fcr_right">
                                    <div class="fcrr_top"><span>27°C-35°C</span></div>
                                    <div class="fcrr_bottom"><span>北京 2020-07-28</span> <span>风向:无持续风向</span> <span>风力:&lt;3级</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="weather_content">
                            <div class="weather_head">
                                <div class="weather_headleft">
                                    <div class="weather_headtop">
                                        <div class="weather_mainimg">
                                            <img src="../img/iconweather.png">
                                            <span>多云转晴</span>
                                        </div>
                                        <div class="weather_maininfo">
                                            <div class="weathermaindiv">
                                                <img src="../img/zb.png">
                                                <span>北京</span>
                                            </div>
                                            <div class="weathermaindivsecond">

                                                <span>37<span style="font-size:0.22rem;">°C</span>~23<span style="font-size:0.22rem;">°C</span></span>
                                            </div>
                                            <div class="weathermaindivthird">
                                                <span>南风3~4级</span>
                                            </div>
                                            <div class="weathermaindivfourth">
                                                <span>实时空气质量:</span>
                                                <div class="airbtn">
                                                    <span>62良</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="weather_headbottom">
                                        <span>周日08月02日 农历六月十八(实时:32°C)</span>
                                    </div>
                                </div>
                                <div class="weatherxiandiv">

                                </div>
                                <div class="weather_headright">
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周一</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>
                                    <div class="weathernextxian">

                                    </div>
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周二</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>
                                    <div class="weathernextxian">

                                    </div>
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周三</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>
                                    <div class="weathernextxian">

                                    </div>
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周四</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>
                                    <div class="weathernextxian">

                                    </div>
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周五</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>
                                    <div class="weathernextxian">

                                    </div>
                                    <div class="weatherrightdiv">
                                        <span class="weatherweek">周六</span>
                                        <span class="weatherdate">08月03日</span>
                                        <img src="../img/iconweather.png">
                                        <span class="weatherinfo">多云</span>
                                        <span class="weathermax">32°C</span>
                                        <div class="weathermainxian"></div>
                                        <span class="weathermin">27°C</span>
                                        <span class="weatherdesc">南风4~5级</span>
                                    </div>

                                </div>

                            </div>
                            <div class="weather_bottom">
                                <div class="tubiao">
                                    <div id="main" style="width: 100%;height:250px;"></div>
                                </div>
                                <div class="bottombtnlist">
                                    <div class="weathbtn" :class="{weatherselect:weatheractive==0}" @click="changeactive(0)">
                                        <span>24小时温度</span>
                                    </div>
                                    <div class="weathbtn" :class="{weatherselect:weatheractive==1}" @click="changeactive(1)">
                                        <span>7天</span>
                                    </div>
                                    <div class="weathbtn" :class="{weatherselect:weatheractive==2}" @click="changeactive(2)">
                                        <span>15天</span>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </body>

</html>
<script>
    var headvue=new Vue({
        el: '#app',
        data(){
            return {
                langinfo:{
                    name:"简体中文",
                    img:'../img/cn.png'
                },
                showlang:false,
                shownotice:false,
                isCollapse:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },

                ],






            }
        },
        computed: {

        },
        created() {

        },
        mounted(){



        },
        methods:{

            showlangdialog(){
                this.showlang=!this.showlang;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
            chosethis(item){
                this.langinfo=item
                this.showlang=false;
            },
            shownoticedialog(){
                this.shownotice=!this.shownotice;
                this.showlang=false;
                this.showuserinfoaction=false


            },
            changemenu(){
                this.isCollapse=!this.isCollapse
                if(this.isCollapse){
                    $(".el-submenu__title span").hide();
                    $(".el-menu-item span").hide();
                    $(".el-submenu__title i").eq(1).hide();
                    $(".imc_left").css({"width":"auto","min-width":"auto"})
                    $(".indexmenu").css("height","100%")

                }
                else{
                    $(".imc_left").css({"width":"2.6rem","min-width":"200px"})
                    $(".indexmenu").css("height","calc(100% - 0.96rem)")
                }
            },
        },
        watch:{
            isCollapse(){
                meun.isCollapse=this.isCollapse
            }
        }
    })
    var meun=new Vue({
        el: '#meun',
        data(){
            return {
                showuserinfoaction:false,
                isCollapse:false,
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){



        },
        methods:{

            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },


            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },


            hidefarmlist(){
                this.$refs["menu"].close("1")
            },

        }
    })
    var content=new Vue({
        el: '#content',
        data(){
            return {
                weatheractive:0,


            }
        },
        computed: {

        },
        created() {

        },
        mounted(){

            this.creattu();

        },
        methods:{
            creattu(){
                var clientWidth=document.body.clientWidth
                console.log(clientWidth)
                if(clientWidth>=1920){
                   $("#main").css("height","250px");
                }else if(clientWidth>=1280){
                    $("#main").css("height",250*(clientWidth / 1920) + 'px');

                }
                else{
                    $("#main").css("height",250*(1280 / 1920) + 'px');

                }

                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption( {

                    tooltip: {
                        trigger: 'axis',
                        formatter: '温度值：{c0}℃'

                    },
                    toolbox: {
                        show : false,


                    },
                    grid: {
                        left: '80px',

                        bottom: '40px',
                        containLabel: false
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: ['00点', '01点', '02点', '03点', '04点', '05点', '06点','07点','08点','09点','10点','11点','12点','13点','14点'],
                        show:true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:"#fff",  //这里用参数代替了
                                fontSize: 12
                            }
                        },
                        axisTick:{       //y轴刻度线
                            show:false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff',

                            }
                        },

                    },
                    yAxis: {
                        type: 'value',
                        show:true,
                        boundaryGap: false,

                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:"#fff"  //这里用参数代替了
                            }
                        },
                        axisTick:{       //y轴刻度线
                            show:false
                        },
                        splitLine :{    //网格线
                            lineStyle:{
                                type:'dashed' ,   //设置网格线类型 dotted：虚线   solid:实线
                                color:"#888"
                            },
                            show:true //隐藏或显示
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff',

                            },
                            show:false

                        },
                        min: function (value) {
                            return value.min -2;
                        },
                        max: function (value) {
                            return value.max +2;
                        }
                    },
                    series: [
                        {
                            name: '数据值',
                            type: 'line',
                            smooth: true,
                            data: [28, 28, 12, 18, 21, 25,25,28, 28, 15, 18, 21, 25,25,28,28],
                            itemStyle: {
                                normal: {
                                    color: '#fff', //改变折线点的颜色
                                    lineStyle: {
                                        color: '#fff' //改变折线颜色
                                    },

                                    label : {
                                        show: true,
                                        formatter: '{c} ℃'
                                    }

                                }
                            },
                        },


                    ]
                })




            },
            hidefarmlist(){
                this.$refs["menu"].close("1")
            },
            changeactive(type){
                this.weatheractive=type;
            }



        }
    })
</script>
<script src="../js/index.js"></script>
